<template>
    <div>
        <div class="flexFS" v-if="data.length > 0">
            <div v-for="(item, index) in data" :key="index" style="position: relative;" @click="selectFun(item)">
                <el-image class="marginRight10" style="width: 200px; height: 200px;border-radius:10px;" :src="item.url"
                    fit="cover" :preview-src-list="toArray(item)"></el-image>
                <div class="notSelect" v-if="type == 'edit'">
                    <img v-if="item.select" src="@/assets/manage/select.png" alt="" style="width: 100%;" srcset="">
                    <img v-else src="@/assets/manage/not-select.png" alt="" style="width: 100%;" srcset="">
                </div>
            </div>
        </div>
        <div v-else>
        <el-empty :image="empty_image"></el-empty>
      </div>
    </div>
</template>

<script>
import pageTool from "@/mixins/page";
import bus from '@/views/user-homepage/user-album/bus.js'
export default {
    mixins: [pageTool],
    props: {
        user_id: {
            type: [Number, String]
        }
    },
    data() {
        return {
            query: {
                user_id: '',
            },
            empty_image: require('@/assets/image/empty.png'),
            type: 'views',
            deleteId: [],
            control: true
        }
    },
    mounted() {
        if (this.user_id) {
            this.query.user_id = this.user_id
            this.beforeInit()
        }
    },
    updated() {

    },
    methods: {
        beforeInit() {
            this.url = "/auth/user-album/index";
            console.log('进入')
            this.append = true;
            this.init(); //重新请求数据
        },
        selectFun(item) {
            if (this.type != 'edit') {
                return //不选择，查看大图
            }
            //判断是否有select属性
            if (item.hasOwnProperty('select') && item.select) {
                this.$set(item, 'select', false)
            } else {
                this.$set(item, 'select', true)
            }

            if (this.deleteId.includes(item.id)) { //存在就删除
                console.log(`${item.id} 存在于数组中`);
                this.deleteId.splice(this.deleteId.indexOf(item.id), 1);
                console.log(' this.deleteId', this.deleteId)
            } else {
                console.log(`${item.id} 不存在于数组中`);//不存在就添加
                this.deleteId.push(item.id)
                console.log(' this.deleteId', this.deleteId)
            }
        },
        allSelect() {
            console.log('全选')
            this.data = this.data.map(item => ({ ...item, select: true }));
            this.deleteId = this.data.map(item => item.id);
            console.log(this.deleteId)
        },

        cancelAllSelect() {
            console.log('取消全选')
            this.data = this.data.map(({ select, ...rest }) => rest);
            this.deleteId = []
        },

        deleteAlbum() {
            if (this.deleteId.length == 0) {
                this.$message.warning('请选择内容');
                return
            }
            console.log('this.deleteId', this.deleteId)
            this.$request.post('/auth/user-album/delete', { id: this.deleteId }).then((res) => {
                try {

                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        customClass: "messageClass"
                    })
                    console.log('messageClass')
                    //删除选中的id
                    this.data = this.data.filter(item => !this.deleteId.includes(item.id));
                } catch (err) {
                    console.log('err', err)
                }
            })
        },


        toArray(item) {
            if (this.type == 'edit') {
                return //等于编辑不让查看大图，点击就是选中
            }
            const arr = []
            arr.push(item.url)
            return arr
        },
    }
}
</script>

<style lang="scss" scoped>
.notSelect {
    position: absolute;
    top: 0;
    right: 10px;
    width: 40px;
    height: 40px;
}
</style>